<template>
<div class="box">
  <h1>待办事项</h1>
  <div class="top">
    <input type="text" placeholder="请输入您的待办事项，回车后即可添加哟" v-model="todo" @keyup.enter="todoAdd">
    <span>{{ show }}</span>
  </div>
  <div class="middle">
    <ul>
      <li v-for="(item, index) in todoList" :key="index">
        <div class="chk">
          <label>
            <input type="checkbox" v-model="item.status">
            <span class="txtTodo">{{ item.content }}</span>
          </label>
        </div>
        <div class="del">
          <input type="button" value="删除" @click="btnDel(index)">
        </div>
      </li>
    </ul>
  </div>
  <div class="foot">
    <div class="f-left">总计：{{ arr.length }}</div>
    <div class="f-right">
      <input type="button" value="全部" @click="btnAll">
      <input type="button" value="未完成" @click="btnUnDone">
      <input type="button" value="已完成" @click="btnDone">
    </div>
  </div>
</div>
</template>
<script setup>
import { ref,computed,watch,onMounted } from 'vue';
import {readData,writeData} from '@/utils/tools'
  //初始待办事项
  const arr=ref([
    {
      content:'淮水竹亭',
      status:false
    },
  ])
  //删除功能
  function btnDel(index){
    arr.value.splice(index,1)
  }
  //回车功能 渲染列表
  const todo=ref('')
  function todoAdd(){
    const tmp=todo.value.trim()
    if(tmp.length<=0 || tmp.length>maxLength){
      return todo.value=''
    }
    let tmpobj={
      content:todo.value,
      status:false
    }
    arr.value.push(tmpobj)
    todo.value=''
  }
  // 不同状态字符串标识
  let filter = ref('all');
  function btnAll() {
    filter.value = 'all'
  }

  function btnUnDone() {
    filter.value = 'unDone'
  }

  function btnDone() {
    filter.value = 'done'
  }
  // 计算属性，用于列表渲染，同时支持修改
  // let todoList = computed({
  //   get() {
  //       if (filter.value === 'all') {
  //           return arr.value
  //       } else if (filter.value === 'unDone') {
  //           return arr.value.filter(item => !item.status)
  //       } else if (filter.value === 'done') {
  //           return arr.value.filter(item => item.status)
  //       }
  //   },
  //   set(newValue) {
  //       console.log(newValue);
  //   }
  // })
  let todoList=computed(()=>{
    if (filter.value === 'all') {
        return arr.value
    } else if (filter.value === 'unDone') {
        return arr.value.filter(item => !item.status)
    } else if (filter.value === 'done') {
        return arr.value.filter(item => item.status)
    }
  })
  //为回车添加列表功能限制字符长度
  const maxLength=50;
  const show=ref('')
  watch(todo,()=>{
    if(todo.value.length>maxLength){
      show.value='最多输入50个字符哟！'
      
    }else{
      show.value=''
    }
  })
  //侦听todoList,将其实时写入本地存储
  watch(arr,(newValue)=>{
    console.log('todoList：', newValue);
    writeData(newValue)
  },{deep:true})
  onMounted(()=>{
    let data=readData()
    console.log(data);
    arr.value=[...data]
  })
</script>
<style>
*{
  margin: 0px;
  padding: 0px;
}
#app{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box{
  width: 500px;
  height: auto; /* 根据内容自动调整高度 */
  border: 3px solid skyblue;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background-color: antiquewhite;
}
h1{
  text-align: center;
  margin-top: 5px;
}
.top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 10px;
  height: 50px;
  
}
.top>input[type=text]{
  width: 95%;
  border-radius: 5px;
  border: none;
  height: 35px;
  text-indent: 10px;
}

.foot{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  padding: 10px;
}
.middle{
  flex: 1;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  height: auto; /* 根据内容自动调整高度 */
}
.middle ul{
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}
.middle li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 98%;
  height: 35px;
  border-bottom: 1px dashed slategray;
  
}
.del>input[type=button]{
  border: none;
  background-color: transparent;
  color: #fff;
}
.middle li:hover .del>input[type=button]{
color: red;
font-size: larger;
}
.foot .f-left{
  font-size: 20px;
  margin-left: 10px;
}
.foot .f-right>input[type=button] {
  border: none;
  background-color: transparent;
  margin: 10px;
}
.foot .f-right>input[type=button]:hover{
  color: rgb(243, 106, 8);
}
.txtTodo{
  margin-left: 10px;
}
input[type=checkbox]:checked+span{
  text-decoration: line-through;
  color: slategray;
}
</style>